<template>
    <div class="h-screen flex flex-col">
        <div class="p-6 flex-1 overflow-y-auto ">
           
       <!-- 订单管理内容 -->
       <div class="bg-white rounded-lg shadow-sm">
        <div class="p-6 border-b">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-medium">订单管理</h3>
            <button class="btn-primary">
              <i class="fas fa-file-export mr-2"></i>导出数据
            </button>
          </div>
        </div>
        <!-- 表格区域 -->
       <div class="bg-white rounded-lg shadow-sm  ">
        <div class="p-6 border-b">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-medium">最近订单</h3>
            <button class="!rounded-button bg-blue-500 text-white px-4 py-2 hover:bg-blue-600 whitespace-nowrap" @click="showAddOrderModal = true" >
              <i class="fas fa-plus mr-2"></i>新增订单
            </button>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">订单编号</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">客户名称</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">订单金额</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">订单状态</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">创建时间</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr v-for="order in orders" :key="order.id" class="hover:bg-gray-50">
                <td class="px-6 py-4 text-sm text-gray-900">{{ order.id }}</td>
                <td class="px-6 py-4 text-sm text-gray-900">{{ order.customer }}</td>
                <td class="px-6 py-4 text-sm text-gray-900">¥{{ order.amount }}</td>
                <td class="px-6 py-4 text-sm">
                  <span :class="[
                    'px-2 py-1 rounded-full text-xs',
                    {
                      'bg-green-100 text-green-800': order.status === '已完成',
                      'bg-yellow-100 text-yellow-800': order.status === '处理中',
                      'bg-red-100 text-red-800': order.status === '已取消'
                    }
                  ]">{{ order.status }}</span>
                </td>
                <td class="px-6 py-4 text-sm text-gray-900">{{ order.date }}</td>
                <td class="px-6 py-4">
                <button 
                   @click="deleteOrder(order.id)"
                   class="text-gray-400 hover:text-red-500 whitespace-nowrap">
                       <i class="fas fa-trash-alt mr-2 "></i>删除订单
                       </button>
                    </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
           <!-- 新增订单模态框 -->
  <div v-if="showAddOrderModal" class="fixed  inset-0 z-[999] bg-black/50 flex  p-4 backdrop-blur-sm ">
    <div class="bg-white rounded-lg w-full max-w-md  max-w-md ">
      <div class="p-6 border-b flex justify-between items-center">
        <h3 class="text-lg font-medium">新增订单</h3>
        <button @click="closeModal" class="text-gray-500 hover:text-gray-700">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <form @submit.prevent="submitOrder" class="p-6 space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">客户名称</label>
          <input v-model="newOrder.customer" required
                 class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
          <p v-if="errors.customer" class="text-red-500 text-sm mt-1">{{ errors.customer }}</p>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">订单金额</label>
          <input v-model="newOrder.amount" type="number" required
                 class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
          <p v-if="errors.amount" class="text-red-500 text-sm mt-1">{{ errors.amount }}</p>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">订单状态</label>
          <select v-model="newOrder.status" 
                  class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <option value="处理中">处理中</option>
            <option value="已完成">已完成</option>
            <option value="已取消">已取消</option>
          </select>
        </div>

        <div class="flex justify-end space-x-4">
          <button type="button" @click="closeModal" 
                  class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">
            取消
          </button>
          <button type="submit" 
                  class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
            确认添加
          </button>
        </div>
      </form>
    </div>
         </div>
      </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
import { ref, reactive } from 'vue';
  const orders = reactive(JSON.parse(localStorage.getItem('orders') || '[]') || [
  { id: 'DD20230901001', customer: '王小明', amount: '2,360', status: '已完成', date: '2023-09-01 10:30' }
]);

  // 在原有响应式变量后添加
const showAddOrderModal = ref(false);
const errors = reactive({
  customer: '',
  amount: ''
});

const newOrder = reactive({
  customer: '',
  amount: '',
  status: '处理中'
});
// 生成订单ID的方法
const generateOrderId = () => {
  const now = new Date();
  const datePart = now.toISOString().slice(0,10).replace(/-/g, '');
  // 使用响应式数组的长度计算
  const count = orders.filter(order => order.date.startsWith(now.toISOString().slice(0,10))).length + 1;
  return `DD${datePart}${count.toString().padStart(3, '0')}`;
  };

// 提交订单
const submitOrder = () => {
  // 清空错误信息
  errors.customer = '';
  errors.amount = '';

  // 简单验证
  if (!newOrder.customer.trim()) {
    errors.customer = '请输入客户名称';
    return;
  }
  if (!newOrder.amount || isNaN(Number(newOrder.amount))) {
    errors.amount = '请输入有效的金额';
    return;
  }


  // 创建新订单
  const  order = {
    id: generateOrderId(),
    customer: newOrder.customer,
    amount: Number(newOrder.amount).toLocaleString(),
    status: newOrder.status,
    date: new Date().toLocaleString('zh-CN', { 
      year: 'numeric', 
      month: '2-digit', 
      day: '2-digit', 
      hour: '2-digit', 
      minute: '2-digit', 
      hour12: false 
    }).replace(/\//g, '-')
  };
  // 添加到订单列表开始位置
   orders.unshift(order)
   localStorage.setItem('orders', JSON.stringify(orders));
  closeModal();
};

// 关闭模态框并重置表单
const closeModal = () => {
  showAddOrderModal.value = false;
  Object.assign(newOrder, {
    customer: '',
    amount: '',
    status: '处理中'
  });
};
// 删除订单
const deleteOrder = (id: string) => {
  try {
    const index = orders.findIndex(order => order.id === id);
    if (index === -1) {
      console.warn(`未找到ID为 ${id} 的订单`);
      return false;
    }
    
    orders.splice(index, 1);
    localStorage.setItem('orders', JSON.stringify(orders));
    return true;
  } catch (error) {
    console.error('订单删除失败:', error);
    return false;
  }
}

</script>
<style  scoped>
.h-screen { height: 100vh; }  /* 确保容器占满视口 */
.overflow-y-auto { overflow-y: auto; } /* 内容溢出时显示滚动条 */

</style>